<template>
  <div class="end">
    <div class="top">
      <div class="left">
        <div class="logo">
          <img src="../../assets/img/footer/img_5.png" alt="ha">
        </div>
        <ul>
          <li v-for="(item,index) in LogoList" :key="index">
            <p>{{ item.content }}</p>
          </li>
        </ul>
      </div>
      <div class="right">
        <div class="contact">
          <p>联系我们</p>
          <p>（工作日09:30~18.30）</p>
          <p><img src="../../assets/img/footer/img_1.png" alt=""> 010-57748642 </p>
          <p><img src="../../assets/img/footer/img_2.png" alt=""> hi@ketangpai.com </p>
        </div>
        <div class="qrcode">
          <img src="../../assets/img/footer/img_3.png" alt="">
          <p>课堂派客服-派派</p>
        </div>
        <div class="qrcode">
          <img src="../../assets/img/footer/img_4.png" alt="">
          <p>扫码开启移动教学</p>
        </div>
      </div>
    </div>
    <div class="foot">
      <span>Copyright © 2014 ketangpai.com All Rights Reserved.<a
          href="https://beian.miit.gov.cn/#/Integrated/recordQuery">京ICP备14023276号-4</a></span>
      <span>
        <a href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011402010566">京公网安备 11011402010566</a>
      </span>
    </div>
  </div>
</template>

<script>


export default {
  methods: {},
  data() {
    return {
      LogoList: [
        {
          content: "关于我们",
        },
        {
          content: "服务条款"
        },
        {
          content: "产品动态"
        },
        {
          content: "浏览器下载"
        },
      ]
    }
  }
}
</script>

<style scoped>
.end {
  min-width: 1224px;
}

.top {
  padding: 0 150px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 300px;
  background: #272e38;
}

.left {
  padding: 90px 0;
}

.logo {
  width: 128px;
  margin-bottom: 8px;
}

.logo img {
  width: 165px;
}

.left ul {
  list-style-type: none;
  display: flex;
  margin-top: 36px;
}

.left li {
  list-style: none;
  margin-right: 64px;
}

.left p {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

.right {
  display: flex;
}

.contact {
  padding: 90px 0;
  margin-right: 35px;
}

.contact p {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  display: flex;
}

.contact p:nth-child(2) {
  font-size: 14px;
  font-weight: 400;
  color: #6d7790;
  margin-top: 2px;
  margin-left: 5px;
}

.contact p:nth-child(3) {
  margin: 16px 0;
}

.contact img {
  margin-right: 8px;
}

.qrcode {
  padding: 45px 0;
  margin-left: 20px;
}

.qrcode img {
  width: 160px;
}

.qrcode p {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  text-align: center;
}

.foot {
  width: 100%;
  height: 65px;
  background: #15191f;
  text-align: center;
}

.foot span {
  font-size: 16px;
  color: #647184;
  margin-right: 60px;
  line-height: 60px;
}

.foot a {
  text-decoration: none;
  color: #647184;
}
</style>